<template>
	<view class="order-payment">
		<u-navbar
			title="支付"
			:autoBack="true"
			placeholder
		></u-navbar>
		
		<view class="order-payment-total">
			<view class="payment-total__text">支付金额</view>
			<view class="payment-total__count">￥<text>1.00</text></view>
		</view>
		
		<view class="order-payment-way">
			<view class="payment-way__wrap" @click="chooseWay(0)">
				<u-icon name="weixin-circle-fill" color="#04be01" size="30"></u-icon>
				<view class="payment-way__text">微信支付</view>
				<view class="payment-way__selected">
					<u-icon name="checkmark-circle-fill" color="#f56c6c" size="18" v-if="way === 0"></u-icon>
				</view>
			</view>
			<view class="payment-way__wrap" @click="chooseWay(1)">
				<u-icon name="rmb-circle-fill" color="#ff9500" size="28"></u-icon>
				<view class="payment-way__text">余额支付<view>账户可用余额 ￥{{money}}</view></view>
				<view class="payment-way__selected">
					<u-icon name="checkmark-circle-fill" color="#f56c6c" size="18" v-if="way !== 0"></u-icon>
				</view>
				
			</view>
		</view>
		
		<view class="order-payment-button">
			<u-button text="确认支付" shape="circle" color="#ff536f" :customStyle="{height: '100rpx', fontSize: '60rpx'}"></u-button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,onMounted,getCurrentInstance} from 'vue'
	import {onLoad} from "@dcloudio/uni-app";	
	
	const { proxy }: any = getCurrentInstance()
	const orderId = ref(0)
	const orderNum = ref('')
	const money = ref(0)
	const way = ref(0)
	
	const chooseWay = (index: number) => {
		way.value = index
	}
	
	onMounted(()=>{
		proxy.ajax(proxy.api.getUserMoney, "POST", {userId: uni.getStorageSync("info").id}, function(resp: any){
			money.value = resp.data.money
		})
	})
	
	onLoad((options)=>{
		orderId.value = options!.orderId
		orderNum.value = options!.orderNum
	})
</script>

<style lang="scss">
@import "style.scss"
</style>
